﻿<div data-bind="with: folder">
    <div data-bind="with: workingMessageUser">
        <h4 ><span data-bind="text: Subject"></span></h4>
        <hr/>
        <ul data-bind="visible: $data.Children.length != 0, foreach: Children" class="unstyled">
            <li>
                <div class="row-fluid">
                    <div class="span4" data-bind="with: Sender">
                        <img class="img-rounded" data-bind="attr: {src: $data.Photo}" alt="Photo">
                        <strong data-bind="text: Title"></strong>
                    </div>
                    <div class="span6">
                        <span data-bind="text: BodyShort"></span>
                    </div>
                    <div class="span2"><span data-bind="text: Created"></span></div>
                </div>
                <hr/>
            </li>
        </ul>
    </div>
</div>
<div data-bind="with: $root.folder.lastChild">
    <div data-bind="with: Sender">
        <img class="img-rounded" data-bind="attr: {src: $data.Photo}" alt="Photo">
        <strong data-bind="text: Title" style="margin-left: 5px;"></strong>
    </div>
    <div style="margin-top: 10px">
        <p data-bind="html: Body"></p>
    </div>
</div>
<hr />
<div class="pull-right" data-bind="visible: $root.folder.replyVisible() == false">
    <button class="btn btn-small" data-bind="click: function(){ $root.folder.reply(); }">Reply</button>
    <button class="btn btn-small" data-bind="click: function(){ $root.folder.replyToAll(); }">Reply to all</button>
</div>
<div data-bind="visible: $root.folder.replyVisible">
    <div class="thumbnail" style="margin-bottom: 5px;">
        <div class="row-fluid">
            <button class="btn btn-small" data-bind="click: function(){ $root.folder.sendReply(); }">Send</button>
            <button class="btn btn-small" data-bind="click: function(){ $root.folder.discardReply(); }">Discard</button>
        </div>
    </div>
    <div style="height: 520px" class="thumbnail">
        <div style="margin-top: 10px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px;">
            <div class="row-fluid" style="margin-bottom: 5px"> 
                <div class="span2">
                    <strong>From</strong>
                    <i class="icon-info-sign" data-bind= "popover: { html: true, title:'Please pay attention! ', content: 'Your first made profile is preselected as sender. If you want, you can change it using autocompletion.', placement: 'right', trigger: 'hover', delay: { show: 500, hide: 2000 }}"></i>
                </div>
                <div class="input-append span10" style="height: 25px;">
                    <div class="thumbnail span9" style="height: 100%; width: 550px; margin-left: 0px;">
                        <span data-bind="with: $root.folder.senderTag" style="margin-right: 5px;">
                            <a class="btn btn-mini" href="#" data-bind="click: function(){ $root.folder.removeSenderTag($data); }"><span data-bind="text: Title"></span> <i class="icon-remove"></i></a>
                        </span>
                        <input id="senderReplyAutocomplete" style="border: none; box-shadow: none; width: 100px; height: 15px; margin-bottom: 5px;" type="text"/>
                    </div>
                    <span class="add-on" style="height: 20px; width: 20px">
                        <a href="#" data-bind="click: function(){ $root.folder.showAllSendersReply(); }">
                            <i class="icon-chevron-down"></i>
                        </a>
                    </span>
                </div>
            </div>
            <div class="row-fluid" style="margin-bottom: 5px"> 
                <div class="span2">
                    <strong>To</strong>
                </div>
                <div class="input-append span10" style="height: 25px;">
                    <div class="thumbnail span9" style="height: 100%; width: 550px; margin-left: 0px;">
                        <span data-bind="foreach: $root.folder.recipientsTags" style="margin-right: 5px;">
                            <a class="btn btn-mini" href="#" data-bind="click: function(){ $root.folder.removeRecipientTag($data); }"><span data-bind="text: Title"></span> <i class="icon-remove"></i></a>
                        </span>
                        <input id="recipientsReplyAutocomplete" style="border: none; box-shadow: none; width: 100px; height: 15px; margin-bottom: 5px;" type="text"/>
                    </div>
                    <span class="add-on" style="height: 20px; width: 20px">
                        <a href="#" data-bind="click: function(){ $root.folder.showAllRecipientsReply(); }">
                            <i class="icon-chevron-down"></i>
                        </a>
                    </span>
                </div>
            </div>
            <div data-bind="with: folder">
                <div data-bind="with: workingMessage">
                    <div class="row-fluid" style="margin-top: 10px">
                        <div class="span12">
                            <textarea cols="20" rows="8" data-bind="tinymce: Body, tinymceOptions: { theme: 'advanced', height: '380', width:'900' }"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>